<template>
  <router-link :to="to"  :class="[!theme?'defaultButton': 'theme' ]"> {{text}}</router-link>
</template>
<script>
export default {
  props: {
    text: {
      type: String,
      default: ''
    },
    to: {
      type: String,
      default: ''
    },
    theme: {
      type: String,
      default: ''
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../../scss/_var.scss';
.defaultButton{
  display: inline-block;
  line-height: 40px;
  width: 140px;
  height: 40px;
  background-color: $color-white;
  color: $color-dark;
  border: 1px solid ;
  text-align: center;
}
.router-link-exact-active {
  background-color: $color-main;
  border: 1px solid $color-main;
  color: $color-white;
}
</style>